<template>
  <div v-if="auditorList.length" :style="{maxWidth: auditorList.length > 1 && '108px'}" class="auditor-avatar-container">
    <div v-if="auditorList.length === 1" class="user-avatar-box">
      <div :class="{'mobile-avatar':showMobilePage}" class="user-avatar-content">
        <user-card :is-fly-user="isFlyUser" :user-data="auditorList[0]" :size="avatarSize"/>
        <div v-if="statusIcons[auditorList[0].userStatus] && showBadge" class="status-icon">
          <el-tooltip :open-delay="800" placement="top" effect="dark">
            <div slot="content" style="max-width: 200px">
              <div>状态：{{ statusToStr[auditorList[0].userStatus] || '--' }}</div>
              <div v-if="auditorList[0].statusChangeTime">
                时间：{{ auditorList[0].statusChangeTime | format('YYYY/MM/DD HH:mm') }}
              </div>
            </div>
            <img :src="statusIcons[auditorList[0].userStatus]">
          </el-tooltip>
        </div>
        <!-- 抄送人已读 -->
        <!-- 总抄送无userStatus，节点抄送userStatus为11/12 -->
        <div v-else-if="(!auditorList[0].userStatus || [11, 12].includes(auditorList[0].userStatus)) && auditorList[0].isRead && showBadge" class="status-icon">
          <el-tooltip :open-delay="800" placement="top" effect="dark">
            <div slot="content" style="max-width: 200px">
              <div>状态：已读</div>
              <div v-if="auditorList[0].statusChangeTime">
                时间：{{ auditorList[0].statusChangeTime | format('YYYY/MM/DD HH:mm') }}
              </div>
            </div>
            <img :src="userStatus1">
          </el-tooltip>
        </div>
        <!-- <div class="out-border" /> -->
      </div>
      <span v-if="!hiddenName" style="color: #333; margin: 0 8px;">{{ auditorList[0].userName || auditorList[0].name || '--' }}</span>
    </div>
    <div v-else class="user-avatar-box">
      <template v-for="(user, index) in auditorList.slice(0, sliceNum)">
        <div
          :key="user.id"
          :style="{ transform: `translateX(-${12 * index}px)`, zIndex: auditorList.length - index }"
          class="user-avatar-content">
          <user-card :is-fly-user="isFlyUser" :user-data="user" :size="avatarSize" is-border/>
          <div v-if="statusIcons[user.userStatus] && showBadge" class="status-icon">
            <el-tooltip :open-delay="800" placement="top" effect="dark">
              <div slot="content" style="max-width: 200px">
                <div>状态：{{ statusToStr[user.userStatus] || '--' }}</div>
                <div v-if="user.statusChangeTime">
                  时间：{{ user.statusChangeTime | format('YYYY/MM/DD HH:mm') }}
                </div>
              </div>
              <img :src="statusIcons[user.userStatus]">
            </el-tooltip>
          </div>
          <!-- 抄送人已读 -->
          <div v-else-if="(!user.userStatus || [11, 12].includes(user.userStatus)) && user.isRead && showBadge" class="status-icon">
            <el-tooltip :open-delay="800" placement="top" effect="dark">
              <div slot="content" style="max-width: 200px">
                <div>状态：已读</div>
                <div v-if="user.statusChangeTime">
                  时间：{{ user.statusChangeTime | format('YYYY/MM/DD HH:mm') }}
                </div>
              </div>
              <img :src="userStatus1">
            </el-tooltip>
          </div>
          <!-- <div class="out-border" /> -->
        </div>
      </template>
      <div v-if="auditorList.length > sliceNum" :style="{transform: `translateX(-${12 * sliceNum}px)`}" class="ellipsis-box" @click="showAllUser">···</div>
    </div>
  </div>
</template>

<script>
import UserCard from '@/components/Common/userCard';
import { getInfo } from '@/api/login';
import userStatus1 from '@/assets/auditProcess/userStatus/status_1.png';
import userStatus2 from '@/assets/auditProcess/userStatus/status_2.png';
import userStatus3 from '@/assets/auditProcess/userStatus/status_3.png';
import userStatus4 from '@/assets/auditProcess/userStatus/status_4.png';
import userStatus5 from '@/assets/auditProcess/userStatus/status_5.png';
import { format } from '@/filters/date';
import { mapState } from 'vuex';

export default {
  name: 'AuditorAvatar',
  components: { UserCard },
  filters: { format },
  props: {
    avatarSize: {
      type: Number,
      default: 42
    },
    userList: {
      type: Array,
      default: () => []
    },
    sortUser: {
      type: Boolean,
      default: false
    },
    isReverse: {
      type: Boolean,
      default: false
    },
    showBadge: {
      type: Boolean,
      default: true
    },
    sliceNum: {
      type: Number,
      default: 2
    },
    isFlyUser: {
      type: Boolean,
      default: false
    },
    hiddenName: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      userStatus1,
      auditorList: [],
      userData: {}
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    statusIcons() {
      return {
        // 4 未读, 默认不展示角标
        5: userStatus1, // 已读
        0: userStatus2, // 未审批
        1: userStatus3, // 审批中
        2: userStatus4, // 已审批
        3: userStatus5 // 拒绝
      };
    },
    statusToStr() {
      return {
        0: '未审批',
        1: '处理中',
        2: '已处理',
        3: '未过审',
        5: '已读'
      };
    }
  },
  watch: {
    userList: {
      handler(data) {
        const list = _.cloneDeep(data);
        if (!this.sortUser) {
          this.auditorList = list;
        } else {
          if (this.isReverse) {
            this.auditorList = list.sort((a, b) => a.userStatus - b.userStatus);
          } else {
            this.auditorList = list.sort((a, b) => b.userStatus - a.userStatus);
          }
        }
      },
      immediate: true
    }
  },
  methods: {
    async openUserCard(data) {
      try {
        const res = await getInfo(data.id);
        this.userData = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    showAllUser() {
      this.$emit('showAllUser');
    }
  }
};
</script>

<style scoped lang="scss">
.auditor-avatar-container {
  .user-avatar-box {
    display: flex;
    align-items: center;
    font-size: 14px;
    ::v-deep .el-avatar > img {
      width: 40px;
      height: 40px;
      /* position: relative;
      z-index: 666;
      border-radius: 50%;
      border: 2px solid #fff; */
    }
  }
  .mobile-avatar {
    flex-wrap: wrap;
    justify-content: center;
  }
  .user-avatar-content {
    display: flex;
    align-items: center;
    position: relative;
  }
  .avatar-box {
    position: relative;
  }
  .out-border {
    width: 42px;
    height: 42px;
    // bottom: -1px;
    bottom: 4px;
    left: -1px;
    position: absolute;
    border-radius: 50%;
    border: 2px solid #fff;
  }
  .status-icon {
    position: absolute;
    display: flex;
    overflow: hidden;
    right: -4px;
    top: 0;
    width: 16px;
    height: 16px;
    z-index: 999;
    img {
      height: 100%;
      width: 100%;
    }
    img:hover {
      cursor: pointer;
    }
  }
  .ellipsis-box {
    min-width: 42px;
    height: 42px;
    position: relative;
    background-color: #dde1ea;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: bold;
    margin-top: -2px;
  }
}
</style>
